<!DOCTYPE html>
<html>
<head>
<title>商品管理</title>
#include("../include/common.html")
<link href="#(base)/admin/static/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script type="text/javascript" src="#(base)/admin/static/plugins/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="#(base)/admin/static/plugins/ztree/js/jquery.ztree.excheck.js"></script>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}
body {color: #2f332a;font: 15px/21px Arial, Helvetica, simsun, sans-serif;background: #f0f6e4 \9;}
h1, h2, h3, h4, h5, h6 {color: #2f332a;font-weight: bold;font-family: Helvetica, Arial, sans-serif;padding-bottom: 5px;}
h1 {font-size: 24px;line-height: 34px;text-align: center;}
h2 {font-size: 14px;line-height: 24px;padding-top: 5px;}
h6 {font-weight: normal;font-size: 12px;letter-spacing: 1px;line-height: 24px;text-align: center;}
a {color:#3C6E31;text-decoration: underline;}
a:hover {background-color:#3C6E31;color:white;}
input.radio {margin: 0 2px 0 8px;}
input.radio.first {margin-left:0;}
input.empty {color: lightgray;}
code {color: #2f332a;}
.highlight_red {color:#A60000;}
.highlight_green {color:#A7F43D;}
li {list-style: circle;font-size: 12px;}
li.title {list-style: none;}
ul.list {margin-left: 17px;}

div.content_wrap {width: 600px;height:380px;}
div.content_wrap div.left{float: left;width: 250px;}
div.content_wrap div.right{float: right;width: 340px;}
div.zTreeDemoBackground {width:250px;height:362px;text-align:left;}

ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
ul.log {border: 1px solid #617775;background: #f0f6e4;width:300px;height:170px;overflow: hidden;}
ul.log.small {height:45px;}
ul.log li {color: #666666;list-style: none;padding-left: 10px;}
ul.log li.dark {background-color: #E3E3E3;}

/* ruler */
div.ruler {height:20px; width:220px; background-color:#f0f6e4;border: 1px solid #333; margin-bottom: 5px; cursor: pointer}
div.ruler div.cursor {height:20px; width:30px; background-color:#3C6E31; color:white; text-align: right; padding-right: 5px; cursor: pointer}

</style>
</head>
<body>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="ibox float-e-margins">
        	<div class="zTreeDemoBackground left">
				<ul id="treeDemo" class="ztree"></ul>
			</div>
			
			<div class="modal-footer col-sm-3 col-sm-offset-2">
	                <button type="button" class="btn btn-w-m btn-primary" id="queding">确定</button>
	            </div>
        </div>
    </div>
</body>
</html>
	<SCRIPT type="text/javascript">
		var setting = {
			check: {
				enable: true,
				chkboxType: { "Y" : "", "N" : "" }
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};

		var zNodes =[
			#for(productCategoryItem : productCategoryTree)
			{ id:#(productCategoryItem.id), pId:#(productCategoryItem.parentId??"0"), name:"#(productCategoryItem.name)", open:true}#if(!for.last),#end
			#end
		];
		
		var code;
		
		/* function setCheck() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			py = $("#py").attr("checked")? "p":"",
			sy = $("#sy").attr("checked")? "s":"",
			pn = $("#pn").attr("checked")? "p":"",
			sn = $("#sn").attr("checked")? "s":"",
			type = { "Y":py + sy, "N":pn + sn};
			zTree.setting.check.chkboxType = type;
			showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
		}
		function showCode(str) {
			if (!code) code = $("#code");
			code.empty();
			code.append("<li>"+str+"</li>");
		} */
		var treeObj;
		$(document).ready(function(){
			treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
			/* setCheck();
			$("#py").bind("change", setCheck);
			$("#sy").bind("change", setCheck);
			$("#pn").bind("change", setCheck);
			$("#sn").bind("change", setCheck); */
		});
	</SCRIPT>
	
	<script type="text/javascript">
	
	function chooseProductCategory(dataarray){
		frameElement.api.opener.chooseProductCategoryCall(dataarray);
		frameElement.api.close();
	}

	
	$("#queding").on("click",function(){
		var nodes = treeObj.getCheckedNodes(true);
		var dataarray=[];
		for(i in nodes){
			var dataobj={"id":nodes[i].id,"name":nodes[i].name};
			dataarray.push(dataobj);
		}
		chooseProductCategory(dataarray);
	});
	</script>